<template>
  <div class="volumeTrend">
    <div class="topArea">
      <ul>
        <li
          v-for="(item,index) in businessVolume"
          @click="getVolumData(index)"
          :class="[{active:categoryIndex==index},{height30:!item.thisMonthValueIncrease || !item.completeRateIncrease || !item.thisMonthValueNet}]"
        >
          <div>
            <span class="title" style="width: 100%">{{item.indexName}}</span>
            <div class="allWidth" v-show="item.thisMonthValueNet">
              <span class="complete fl">净增:</span>
              <span class="numberWidth">{{item.thisMonthValueNet}}</span>
            </div>
            <div
              class="allWidth"
              v-show="item.thisMonthValueIncrease !=null ||item.completeRateIncrease !=null"
            >
              <span class="complete fl">新增:</span>
              <span class="numberWidth">{{item.thisMonthValueIncrease}}</span>
            </div>
          </div>
          <div>
            <span class="complete">完成率</span>
            <br />
            <span class="numberWidth" v-show="item.completeRateNet">{{item.completeRateNet}}</span>
            <br v-show="item.completeRateNet" />
            <span class="numberWidth">{{item.completeRateIncrease}}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="bottomArea" v-if="refreshFlag">
      <div
        class="leftArea"
        v-show="newLyIncomBarData.yAxis && newLyIncomBarData.yAxis.length != 0"
        :style="volumeIncomeData.yAxis && volumeIncomeData.yAxis.length == 0 ? {'width':'100%'}:{}"
      >
        <div class="title">
          {{reportNetName}}
          <div class="fr">单位：万户</div>
        </div>
        <newlyIncomBar :newLyIncomBarData="newLyIncomBarData" :key="'-'+categoryIndex"></newlyIncomBar>
        <!--   <span class="income">业务量</span> -->
        <!-- <span class="yearOnYear">同比</span> -->
      </div>
      <div
        class="rightArea"
        v-show="volumeIncomeData.yAxis && volumeIncomeData.yAxis.length != 0"
        :style="newLyIncomBarData.yAxis && newLyIncomBarData.yAxis.length == 0 ? {'width':'100%'}:{}"
      >
        <div class="title">
          {{reportIncreaseName}}
          <div class="fr">单位：万户</div>
        </div>
        <!-- <volumeAccumIncome :volumeAccumIncomeData="volumeAccumIncomeData"></volumeAccumIncome> -->
        <volumeIncomBar :volumeIncomeData="volumeIncomeData" :key="'+'+categoryIndex"></volumeIncomBar>
        <!-- <volumePie :structDTOData='structDTOData'></volumePie> -->
        <!-- <volumePie :structDTOData='structDTOData' v-show="structDTOData !== undefined && structDTOData.length>0"></volumePie> -->
      </div>
    </div>
  </div>
</template>

<script>
import volumeAccumIncome from "../echarts/volumeAccumIncome";
import volumeIncomBar from "../echarts/volumeIncomBar";
import newlyIncomBar from "../echarts/newlyIncomBar";

// import volumePie from '../echarts/volumePie';
import { $budgetAPI } from "@/api";
import { getCookie } from "@/common/js/cookie";
export default {
  name: "revenueTrend",
  components: {
    // tab1,
    // tab2,
    volumeIncomBar,
    newlyIncomBar,
    // volumeAccumIncome,
    // volumePie,
  },
  data() {
    return {
      categoryIndex: 0,
      volumeAccumIncomeData: {},
      volumeIncomeData: {},
      newLyIncomBarData: {},
      structDTOData: [],
      mainDev: [],
      initPam: "",
      reportNetName: "",
      mainDevNetList: [],
      tbIncreaseNetList: [],
      titleNetName: "",
      reportIncreaseName: "",
      mainDevIncreaseList: "",
      tbIncreaseList: "",
      titleIncreaseName: "",
      businessVolume: [],
      refreshFlag: true,
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getMainOperationIncomeData();
      this.getVolumData(0);
    },
    //获取主营数据接口
    getMainOperationIncomeData(index) {
      let token = getCookie("token");
      return new Promise((resolve) => {
        $budgetAPI.getMainOperationIncomeData(
          { token: token },
          (res) => {
            if (res.code == 0) {
              this.businessVolume = res.content.mainDev;
              res.content.mainDev.map((item, index) => {
                if (item.completeRateIncrease !== null) {

                  item.completeRateIncrease = item.completeRateIncrease == 0 ? '-' : item.completeRateIncrease + "%";
                }
                if (item.completeRateNet !== null) {
                  item.completeRateNet = item.completeRateNet == 0 ? '-' : item.completeRateNet + "%";
                }
              });
              this.initPam = res.content.mainDev[index].indexCode;
              this.acctMonth =
                res.content.acctMonth.substring(0, 4) +
                "年" +
                (res.content.acctMonth.substring(4, 5) > 0
                  ? res.content.acctMonth.substring(4, 5)
                  : "") +
                res.content.acctMonth.substring(5, 6) +
                "月";
              this.$emit("acctMonthData", this.acctMonth);
            } else {
              console.log(res);
              // this.alertError(res);
            }
            resolve(this.initPam);
          },
          (err) => {}
        );
      });
    },
    getVolumData(index) {
      this.categoryIndex = index;
      this.refreshFlag = false;
      this.getMainOperationIncomeData(index).then((res) => {
        let indexCode = res;
        let token = getCookie("token");
        $budgetAPI.getMainDevByIndexCode(
          { token: token, indexCode: indexCode },
          (res) => {
            if (res.code == 0) {
              this.reportNetName = res.content.reportNetName;
              this.tbIncreaseNetList = res.content.tbIncreaseNetList;
              this.titleNetName = res.content.titleNetName;
              this.reportIncreaseName = res.content.reportIncreaseName;
              this.tbIncreaseList = res.content.tbIncreaseList;
              this.titleIncreaseName = res.content.titleIncreaseName;
              let obj = {
                xAxis: [],
                yAxis: [],
                titleIncreaseName: "",
              };
              obj.xAxis = res.content.acctMonths;
              obj.yAxis = res.content.mainDevIncreaseList;
              obj.titleIncreaseName = res.content.titleIncreaseName;
              let obj1 = {
                xAxis: [],
                yAxis: [],
                titleNetName: "",
              };
              obj1.xAxis = res.content.acctMonths;
              obj1.yAxis = res.content.mainDevNetList;
              obj1.titleNetName = res.content.titleNetName;
              this.volumeIncomeData = obj;
              this.newLyIncomBarData = obj1;
              console.log(this.volumeIncomeData.yAxis);
              console.log(this.volumeIncomeData.yAxis.length);
              console.log(this.newLyIncomBarData.yAxis);
              console.log(this.newLyIncomBarData.yAxis.length);
              this.$nextTick(() => {
                this.refreshFlag = true;
              });
              console.log(res);
            } else {
              console.log(res);
              // this.alertError(res);
            }
          },
          (err) => {}
        );
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.volumeTrend {
  .topArea {
    ul {
      display: flex;
      li {
        flex: 1;
        float: left;
        text-align: center;
        background-color: #7b83a9;
        border-radius: 5px;
        margin-left: 10px;
        display: flex;
        height: 80px;
        padding: 10px;
        font-size: 14px;
        cursor: pointer;
        .allWidth {
          width: 100% !important;
        }
        div {
          display: inline-block;
          &:first-child {
            border-right: 1px dashed #dfe4fd;
            width: 60%;
            padding-right: 10px;
          }
          &:last-child {
            width: 40%;
          }
          span {
            height: 20px;
            line-height: 20px;
            display: inline-block;
          }
          .title {
            color: #dfe4fd;
            width: calc(100% - 35px);
            float: right;
          }
          .complete {
            color: #dfe4fd;
            &.fl {
              width: 35px;
              padding-left: 0;
            }
          }
          // &.first-child{

          // }
          // &.last-child{
          //   width: 35px;
          // }
          .numberWidth {
            width: calc(100% - 35px);
            color: #fff;
            font-weight: 700;
          }
        }

        &.active {
          background-color: #7f92f7;
          box-shadow: 0px 6px 12px 0px rgba(106, 130, 253, 0.3);
        }
        &.height30 {
          span {
            height: 30px;
            line-height: 30px;
            display: inline-block;
          }
        }
        &:first-child {
          margin-left: 0;
        }
      }
    }
  }
  .bottomArea {
    display: flex;
    height: 380px;
    position: relative;
    .leftArea {
      width: 50%;
      height: 380px;
      position: relative;
      .title {
        position: relative;
        top: 20px;
        color: #000;
        font-size: 14px;
        font-weight: 700;
        .fr {
          font-weight: normal;
        }
      }
      .income {
        padding: 5px 10px;
        background: #f2f3f7;
        border-radius: 50px;
        position: absolute;
        left: 0;
        top: 40%;
      }
      .yearOnYear {
        padding: 5px 10px;
        background: #f2f3f7;
        border-radius: 50px;
        position: absolute;
        right: 0px;
        top: 48%;
      }
    }
    // .rightArea{
    //   width: 0;
    // }
    .rightArea {
      width: 50%;
      position: relative;
      height: 380px;
      margin-left: 30px;
      &.active {
        width: 0;
        display: none;
      }
      .title {
        position: relative;
        top: 20px;
        color: #000;
        font-size: 14px;
        font-weight: 700;
        .fr {
          font-weight: normal;
        }
      }
    }
  }
}
</style>
